<script setup>
const rows = [
    { name: 'Alice', age: 24 },
    { name: 'Bob', age: 30 },
    { name: 'Carol', age: 22 },
    { name: 'Bob', age: 30 },
    { name: 'Carol', age: 22 },
    { name: 'Bob', age: 30 },
    { name: 'Carol', age: 22 },
    { name: 'Carol', age: 22 },
    { name: 'Bob', age: 30 },
    { name: 'Carol', age: 22 },
    { name: 'Bob', age: 30 },
    { name: 'Carol', age: 22 },
    { name: 'Carol', age: 22 },
    { name: 'Bob', age: 30 },
    { name: 'Carol', age: 22 },
    { name: 'Carol', age: 22 },
    { name: 'Bob', age: 30 },
    { name: 'Carol', age: 22 }
]
</script>

<template>
    <div class="page-table">
        <table border="1">
            <thead>
                <tr>
                    <th>名称</th>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Age</th>
                    <th>Age</th>
                    <th>Age</th>
                </tr>
            </thead>
            <tbody>
                <!-- 使用 v-for 指令遍历 rows 数组 -->
                <tr v-for="(row, index) in rows" :key="index">
                    <td>{{ row.name }}</td>
                    <td>{{ row.age }}</td>
                    <td>{{ row.age }}</td>
                    <td>{{ row.age }}</td>
                    <td>{{ row.age }}</td>
                    <td>{{ row.age }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<style scoped lang="scss">
.page-table {
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 16rem;
    overflow: auto;
    max-height: 70%;

    /* 设置表头的背景颜色和文字颜色 */
    th {
        color: #39a7a7;
        text-align: left;
    }

    table {
        width: 100%;
        height: 100%;
    }

    table,
    th,
    td {
        border: none;
        border-collapse: collapse;
        padding: 2px 8px;

    }

    /* 设置表格行的背景颜色 */
    tr:nth-child(even) {
        background: rgba(53, 78, 99, 0.3);
        /* 淡蓝色背景 */
        background-image: linear-gradient(to bottom, rgba(15, 187, 255, 0.3) 0%, rgba(135, 206, 235, 0) 50%, rgba(135, 206, 235, 0.3) 100%);
    }
}

/* 整个滚动条 */
::-webkit-scrollbar {
    width: 5px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, rgba(122, 153, 217, .1), #1c3a94, rgba(122, 153, 217, .1));
    border-radius: 32px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0);
    /* 轨道的背景色 */
    border-radius: 32px;
}
</style>
